fix(protocol-designer): fix long step name, step details, and step summary layout issue #16547
Conversation
syao1226
changed the title
| @@ -209,8 +210,8 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element { | |||
| height="calc(100vh - 64px)" | |||
| title={ | |||
| <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}> | |||
| <Icon size="1rem" name={icon} /> | |||
| <StyledText desktopStyle="bodyLargeSemiBold"> | |||
| <Icon size="1rem" name={icon} style={{ flexShrink: 0 }} /> | |||
There was a problem hiding this comment.
There was a problem hiding this comment.
When I tested on https://sandbox.designer.opentrons.com/protocol_designer-fix-step-name/#/overview the text didn't wrap on the step.
There was a problem hiding this comment.
ohh didn't take that into consideration, i'll work on fixing that as well! thanks for the catch, alex.
There was a problem hiding this comment.
i'll change it to use minWidth, it looks cleaner to me. thanks, koji
|
@syao1226 I just merged my PR that includes line clamp style in atoms into edge. import |
| desktopStyle="bodyLargeSemiBold" | ||
| css={` | ||
| ${LINE_CLAMP_TEXT_STYLE(2)} | ||
| word-break: break-all |
There was a problem hiding this comment.
word-wrap: break-word; didn't work?
There was a problem hiding this comment.
i added break-all to handle case of very long words or words connected by symbols like underscore.
syao1226
changed the title
fixes RQA-3355
Overview
Fixing layout issues in
StepFormToolbox,StepContainer, andStepSummarywhen step names, step details, and step summaries are too long, causing the step icon to shrink, the step name and step summaries content to go off-screen, and the step details text to exceed the window size.Refer to the ticket for details on the current layout issues and the expected design.
Test Plan and Hands on Testing
Changelog
Review requests
Risk assessment